<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner img {
            width:100%;
            height: 400px;
            object-fit: contain;
            background-color: #f8f9fa;
        }
        .carousel-inner {
            height: 350px;

        }
        .jumbotron {
            margin-top: 10px;
            margin-bottom: 0px;
            padding-top: 10px;
        }
        #demo {
            width:100%;
            height: 350px;
        }
        .row {
            height: 500px;
            align-items: center;
        }
        .left {
            float: left;
            width: 65%;
        }
        .right {
            float: left;
            width: 30%;
        }
        .card {
            height: 350px;
        }

        .footer {
            position: absolute;
            bottom: 0;
            height: 60px;
        }
        .jumheight1 {
            height: 140px;
        }
        .jumheight2 {
            height: 260px;
        }
        .end_name {
            margin-bottom: 5px;
        }
        .footer2 {
            padding-top: 210px;
            text-align: center;
        }
    </style>

</head>
<body style="background-color: #f8f9fa">
<div>
    <div class="jumbotron  bg-light jumheight1" >
        <h1>WelCome CodeSky</h1>
    </div>
    <!-- 轮播图 -->
    <!-- 指示符 -->
    <hr>
    <div class="row" style="background-color: #f8f9fa">
<!--        轮播图-->
        <div class="left" style="background-color: #f8f9fa">
            <div id="demo" class="carousel slide " data-ride="carousel" >
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>
                <!-- 轮播图片 -->
                <div class="carousel-inner" >
                    <div class="carousel-item active">
                        <img src="https://img-blog.csdnimg.cn/img_convert/586dc56f36de6e74c6a8fd816043b828.png">
                    </div>
                    <div class="carousel-item">
                        <img src="https://img-blog.csdnimg.cn/img_convert/ac3416110cce6fd635d27c248a0b4fcc.png">
                    </div>
                    <div class="carousel-item">
                        <img src="https://img-blog.csdnimg.cn/img_convert/b66edfe5bd07f16c3245a8270a97de06.png">
                    </div>
                </div>
                <!-- 左右切换按钮 -->
                <a href="#demo" class="carousel-control-prev" data-slide="prev" >
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a href="#demo" class="carousel-control-next" data-slide=next>
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>

        <div class="right" style="margin-right: 10px">
            <!-- 登陆窗口 -->
            <div class="card">
                <div class="card-header">
                    用户登陆
                </div>
                <div class="card-body">
<!--                    登录页-->
                    <form class="login_form">
                        <table style="border-collapse: separate;border-spacing: 0px 10px;">
                            <tr>
                                <td class="margin-top:10">
                                    <label>Email：</label>
                                </td>
                                <td>
                                    <input  type="text" name="" class="login_email">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>密码:</label>
                                </td>
                                <td>
                                    <input type="password" name="" class="login_password" >
                                </td>
                            </tr>
                        </table>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" name="" class="form-check-input">记住密码
                            </label>
                        </div>
                        <div class="footer">
                            <button type="button" class="btn btn-primary login">登陆</button>
                            <button type="button" class="btn btn-secondary to_register">注册</button>
                            <button type="button" class="btn btn-link"><small>忘记密码？</small></button>
                        </div>
                    </form>
<!--                    注册页-->
                    <form class="register_form" hidden>
                        <table style="border-collapse: separate;border-spacing: 0px 10px;">
                            <tr>
                                <td class="margin-top:10">
                                    <label>用户名:</label>
                                </td>
                                <td>
                                    <input type="text" name="" class="register_name">
                                </td>
                            </tr>
                            <tr>
                                <td class="margin-top:10">
                                    <label>邮箱:</label>
                                </td>
                                <td>
                                    <input type="email" name="" class="register_eamil">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label >密码:</label>
                                </td>
                                <td>
                                    <input type="password" name="" class="register_password" >
                                </td>
                            </tr>
                        </table>
                        <div class="footer" >
                            <button type="button" class="btn btn-primary to_login" >登陆</button>
                            <button type="button" class="btn btn-secondary register">注册</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="jumbotron bg-light jumheight2" >
        <p class="footer2">@Master_Cen</p>
    </div>
</div>
<script>
<!--    跳转注册页面-->
    $(".to_register").click(function () {
        $(".card-header").html("用户注册")
        $(".login_form").attr("hidden",true)
        $(".register_form").attr("hidden",false)
    })
// 跳转登录页
    $(".to_login").click(function () {
        $(".card-header").html("用户登录")
        $(".login_form").attr("hidden",false)
        $(".register_form").attr("hidden",true)
    })

// 注册
    $(".register").click(function () {
        $.post(
            "../user.UserController/addUser",
            {
                "user_name":$(".register_name").val(),
                "user_email":$(".register_eamil").val(),
                "user_password":$(".register_password").val()
            },
            function (data,status) {
                alert(status)
                if(status == "success"){
                    $(".card-header").html("用户登录")
                    $(".login_form").attr("hidden",false)
                    $(".register_form").attr("hidden",true)
                }else{
                    alert("服务器错误！")
                }
            }
        )
    })

    $(".login").click(function () {

        $.post(
            "../user.UserController/login",
            {
                "user_email":$(".login_email").val(),
                "user_password":$(".login_password").val()
            },
            function (data,status) {
                if(data.code === 10001){
                    alert("登陆成功!")
                    if(data.obj.role === 0){
                        $.cookie('isAdmin',true,{path:'/'})
                    }
                    $.cookie('isLogin',true,{path:'/'})
                    $.cookie('user_name',data.obj.user_name,{path:'/'})

                    $.cookie('user_img_url',encodeURI(data.obj.url),{path:'/'})
                    $.cookie('uid',data.obj.uid,{path:'/'})
                    $.cookie('user_email',data.obj.user_email,{path:'/'})


                    top.location.reload()
                    // window.location = "../user.user/PersonInfo?uid=" + $.cookie('uid')

                }else{
                    alert("登录失败，邮箱或密码错误!")
                }
            }
        )
    })
</script>
</body>
</html>